<template>
  <div>
    Header
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Header",
});

</script>

<script setup lang="ts">
  /* 
  vue3的生命周期
    1. 生命周期函数的destroyed和beforeDestory被替换为了unmounted和beforeUnmounted
    2. 如果书写选项式api的生命周期,则setup函数会在beforeCreate和created之前调用,在beforeCreate中可以拿到setup中定义的数据,但是还是拿不到data选项定义的数据
    3. 如果书写组合式api,则没有beforeCreate和created两个生命周期函数,setup在组合式api中其实是取代了这两个生命周期函数的过程(数据的注入和劫持,watch监听,computed,方法的定义)
    4. 在组合式api中,使用Vue暴露出来的onxxxx方法来作为生命周期函数,并接受回调函数作为参数
    5. 组合式api中的生命周期函数可以多次调用
*/
import { onUpdated, onBeforeUpdate, onMounted, onBeforeMount } from "vue";

onBeforeMount(() => {
  console.log("header beforeMount");
});

onMounted(() => {
  console.log("header mounted1");
});
onMounted(() => {
  console.log("header mounted2");
});
</script>

<style scoped>

</style>